<template>
  <div class="container" style="width: 900px; margin: 0 auto">
    <h2 class="title">搜索结果</h2>

    <div class="menu">
      <el-button @click="type = 'post'" :type="type == 'post' ? 'primary' : ''"
        >文章</el-button
      >
      <el-button @click="type = 'user'" :type="type == 'user' ? 'primary' : ''"
        >用户</el-button
      >
    </div>
    <div class="result">
      <div class="post-result" v-if="type == 'post'">
        <div class="d-flex">
          <h2 class="result-count">共 {{ page.total }} 条结果</h2>
          <el-dropdown @command="handleCommand" size="mini" trigger="click">
            <span class="el-dropdown-link">
              {{ postOrder.name
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ code: 'updateTime', name: '最新' }"
                >最新</el-dropdown-item
              >
              <el-dropdown-item :command="{ code: 'likeCount', name: '点赞' }"
                >点赞</el-dropdown-item
              >
              <el-dropdown-item :command="{ code: 'viewCount', name: '浏览量' }"
                >浏览量</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="post-list">
          <artical-item
            v-for="p in postList"
            :key="p.postId"
            :post="p"
          ></artical-item>
        </div>
      </div>
      <div class="user-result" v-if="type == 'user'">
        <div class="d-flex">
          <h2 class="result-count">共 {{ page.total }} 条结果</h2>
          <el-dropdown @command="handleCommand" size="mini" trigger="click">
            <span class="el-dropdown-link">
              {{ userOrder.name
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ code: 'fansCount', name: '粉丝' }"
                >粉丝</el-dropdown-item
              >
              <el-dropdown-item :command="{ code: 'postCount', name: '文章' }"
                >文章</el-dropdown-item
              >
              <el-dropdown-item :command="{ code: 'likeCount', name: '点赞' }"
                >点赞</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="user-list">
          <follow-user-item
            v-for="u in userList"
            :key="u.userId"
            :user="u"
          ></follow-user-item>
        </div>
      </div>
    </div>
    <el-skeleton :loading="loading" :rows="6" animated />
    <el-empty v-if="!page.total && !loading" description="空空如也~"></el-empty>
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :page-count="page.pages"
    >
    </el-pagination>
  </div>
</template>

<script>
import ArticalItem from "@/components/Artical/ArticalItem.vue";
import FollowUserItem from "@/components/InfoCenterItems/FollowUserItem.vue";
import debounceWrapper from "@/commons/debounce";
import postApi from "@/axios/postApi";
import userApi from "@/axios/userApi";
export default {
  components: {
    ArticalItem,
    FollowUserItem,
  },
  data() {
    return {
      q: "",
      type: "post",
      page: {
        current: 1,
        size: 10,
        total:0
      },
      loading:true,
      postList: [],
      userList: [],
      userOrder: { name: "粉丝", code: "fansCount" },
      postOrder: { name: "最新", code: "updateTime" },
    };
  },
  
  created() {
    this.q = this.$route.query.q || "";
    if (this.$route.query.type) this.type = this.$route.query.type;
    this.loadData();
  },
  watch: {
    $route: function () {
      this.q = this.$route.query.q || "";
      if (this.$route.query.type) this.type = this.$route.query.type;
      this.reloadData();
    },
    type: "reloadData",
  },
  methods: {
    handleCommand(c) {
      if (this.type == "post") {
        this.postOrder = c;
      } else {
        this.userOrder = c;
      }
      this.reloadData();
    },
    handleSizeChange(val) {
      this.page.current = 1;
      this.page.size = val;
      this.reloadData();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.loadData();
    },

    loadData() {
        this.loading=true
      if (this.type == "post") {
        this.searchPost();
      } else {
        this.searchUser();
      }
    },
    reloadData() {
      this.page.current = 1;
      this.loadData();
    },
    searchPost() {
      postApi
        .search({ ...this.page, q: this.q, order: this.postOrder.code })
        .then(({ data }) => {
          this.postList = data.data.records;
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
          this.loading=false
        });
    },
    searchUser() {
      userApi
        .search({ ...this.page, q: this.q, order: this.userOrder.code })
        .then(({ data }) => {
          this.userList = data.data.records;
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
          this.loading=false
        });
    },
  },
};
</script>

<style scope lang="less">
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.title {
    margin: 20px 0;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.result-count {
  margin-right: 10px;
}
.menu{
    margin: 20px 0;
}
.result-count {
    margin-right: 40px;
}
.el-dropdown-link {
   line-height: 40px;
}

</style>